/* Import all components */
@import 'themes/default/globals/site.variables';
@import 'themes/pxt/globals/site.variables';

/* Reference import */
@import (reference) "semantic.less";

/*******************************
        High Contrast
*******************************/

@selected: yellow;
@disabled: #3ff23f;

/* Messages */
#msg .hc {
    background-color: black !important;
    border: 1px solid white !important;
    border-radius: 0em;
    color: white !important;
}

@HCRootBackground: black;
@HCblocklySvgColor: black;
@HCsimulatorBackground: black;
@HCblocklySvgColor: black;

@HCmainMenuBackground: white;
@HCmainMenuTextColor: black;
@HCmainMenuInverseTextColor: white;

@HCblocklyToolboxColor: black;
@HCblocklyTreeLabelColor: white;
@HCblocklyTreeLabelSelectedColor: white;

@HCeditorToolsBackground: black;

@HCbackground: black;
@HCtextColor: white;

@HChomeScreenBackground: black;

@HCaccessibleMenuBackground: black;
@HCaccessibleMenuColor: white;

.hc {

    /* Focus */

    *[tabindex='0'],
    *[tabindex*='d1'],
    *[tabindex*='d2'], /* Takes items with a defined tabIndex from 0 to 29. */
    *[role='menuitem'],
    a:not([tabindex='-1']),
    input:not([tabindex='-1']),
    button:not([tabindex='-1']),
    #monacoEditor .blocklyTreeRow,
    #monacoEditor .monacoDraggableBlock {
        &:focus, &:hover {
            outline: 2px solid @selected !important;
        }
    }

    p {
        color: @HCtextColor !important;
    }

    #tutorialcard .prevbutton,
    #tutorialcard .nextbutton {
        &:hover, &:focus {
            > i, > span, > i.orange {
                color: @HCtextColor !important;
            }
        }
    }

    @media all and (pointer:coarse) { /* If touch screen */
        *[tabindex='0'],
        *[tabindex*='d1'],
        *[tabindex*='d2'],
        *[role='menuitem'],
        a:not([tabindex='-1']),
        input:not([tabindex='-1']),
        button:not([tabindex='-1']),
        #monacoEditor .blocklyTreeRow,
        #monacoEditor .monacoDraggableBlock {
            &:focus, &:hover {
                outline: 1px solid transparent !important;
            }
        }
    }

    .blocklyWidgetDiv *,
    .blocklySVG *,
    .monaco-editor *,
    #monacoEditor *,
    .blocklyTreeRoot {
        &:focus, &:hover {
            outline: none !important;
        }
    }

    /* Blockly toolbox */
    .pxtToolbox:not(.invertedToolbox) {
        span.blocklyTreeLabel {
            color: @HCblocklyTreeLabelColor;
        }
        .blocklyTreeSelected span.blocklyTreeLabel {
            color: @HCblocklyTreeLabelSelectedColor;
        }
        .blocklyTreeRow:not(.blocklyTreeSelected):hover,
        .blocklyTreeRow:not(.blocklyTreeSelected):focus {
            background-color: lighten(@HCblocklyToolboxColor, 25.0);
        }
    }

    /* Blockly flyout */
    path.blocklyFlyoutBackground {
        fill: @HCblocklySvgColor !important;
        fill-opacity: 1 !important;
        stroke-width: 4px;
        stroke: @HCblocklyTreeLabelColor;
    }
    .monacoFlyout {
        background: @HCblocklySvgColor !important;
        border-right: 4px solid @HCtextColor !important;
    }

    /* Main editor areas */

    #root {
        background: @HCRootBackground !important;
    }
    #filelist {
        background: @HCsimulatorBackground !important;

        #boardview {
            background: @HCsimulatorBackground !important;
        }
    }
    svg.blocklySvg {
        background-color: @HCblocklySvgColor !important;
    }

    .blocklyMainBackground {
        fill: transparent !important;
    }

    .blocklyToolboxDiv, .monacoToolboxDiv {
        background: @HCblocklyToolboxColor !important;
        border-right: 1px solid @HCblocklyTreeLabelColor !important;
    }
    .blocklyPath {
        stroke-width: 3px;
    }

    /* Menu bar */
    .menubar .menu > .item:focus > i,
    .menubar .menu > .item:focus > span {
        color: @selected !important;
    }

    .menu .ui.label.betalabel {
        color: @HCbackground !important;
    }

    #mainmenu:not(.inverted), #homemenu:not(.inverted) {
        background-color: @HCmainMenuBackground !important;
        color: @HCmainMenuTextColor !important;
        border-bottom: 4px solid @HCtextColor;

        .ui.item {
            color: @HCmainMenuTextColor;
        }
        .item.editor-menuitem .ui.grid {
            border: 1px solid @HCbackground !important;
        }
    }
    #mainmenu.inverted, #homemenu.inverted {
        background-color: @HCmainMenuTextColor !important;
        color: @HCmainMenuBackground !important;
        border-bottom: 4px solid @HCtextColor;

        .ui.item {
            color: @HCmainMenuBackground;
        }
        .item.editor-menuitem .ui.grid {
            border: 1px solid @HCtextColor !important;
        }
    }

    /* Editor switch toggle */
    .menubar .ui.menu.fixed .item.editor-menuitem .ui.grid {
        background: @HCbackground !important;
        .item:not(.active) {
            opacity: 1 !important;
            color: @HCmainMenuInverseTextColor !important;
        }
        .item.active {
            background: @HCtextColor !important;
            color: @HCmainMenuTextColor !important;
        }
    }

    /* Editor toolbar */
    #editortools, #downloadArea {
        background: @HCeditorToolsBackground !important;
    }
    #editortools {
        border-top: 4px solid @HCtextColor;
    }

    /* Buttons */
    .ui.button {
        background: @HCbackground !important;
        color: @HCtextColor !important;
        border: 1px solid @HCtextColor !important;

        &:focus, &:hover {
            color: @HCtextColor !important;
            border-color: @selected !important;

            i, span {
                color: @HCtextColor !important;
            }
        }

        .inverted.icon {
            color: @HCtextColor !important;
        }
    }

    .ui.button.disabled {
        opacity: 1 !important;
        border: 1px solid @disabled !important;

        i, span {
            color: @disabled !important;
        }
    }

    .filemenu .ui.button,
    .header-close .ui.button {
        &:focus, &:hover {
            color: @selected !important;
            i, span {
                color: @selected !important;
            }
        }
    }

    /* Inputs */
    .ui.input input,
    .ui.input .input {
        background: @HCbackground !important;
        color: @HCtextColor !important;
        border: 1px solid @HCtextColor !important;
    }
    .ui.form {
        .field>label {
            color: @HCtextColor !important;
        }
        input,
        textarea,
        .ui.secondary.segment {
            background: @HCbackground !important;
            color: @HCtextColor !important;
            border: 1px solid @HCtextColor !important;
        }
    }

    input,
    .input,
    .ui.form {
        ::placeholder {
            color: darken(@HCtextColor, 20.0) !important;
        }

        ::selection {
            color: @HCbackground !important;
            background: @HCtextColor !important;
        }
    }

    .ui.header {
        color: @HCtextColor !important;
    }

    /* Home screen */
    .projectsdialog, .projectsdialog .tabsegment {
        background: @HChomeScreenBackground !important;
        color: @HCtextColor !important;
        border-color: @HCtextColor !important;

        .header {
            opacity: 1 !important;
            color: @HCtextColor;
        }

        .homefooter a {
            color: @HCtextColor !important
        }
    }

    .projectsdialog {
        .gallerysegment {
            .ui.header {
                &.myproject-header {
                    &:focus, &:hover {
                        text-decoration: underline;
                        color: @HCtextColor;
                    }
                }
            }
        }
        .detailview {
            .closeIcon .remove.icon {
                background-color: @HCbackground;
            }
            .header {
                color: @HCbackground;
            }
        }
    }

    .ui.form .content .description {
        color: @HCtextColor;
    }

    .ui.table {
        th, tr, i,
        th.positive, tr.postive {
            color: @HCtextColor !important;
            background: @HCbackground !important;
        }
    }

    .carouselarrow {
        background: @HCbackground;
        color: @HCtextColor;
        border: 2px solid @HCtextColor !important;
    }

    /* Cards */
    .card {
        background: @HCbackground !important;
        border: 2px solid @HCtextColor !important;
        border-radius: initial !important;
        box-shadow: initial !important;

        .header, .description, .meta {
            color: @HCtextColor !important;
        }

        &:focus, &:hover {
            .header, .meta, .description {
                color: @selected !important;
            }
        }

        .ui.orange.labels .label, .ui.orange.label {
            background: @disabled !important;
            border-color: @disabled !important;
            color: @HCbackground !important;
        }
    }

    /* File menu */
    .filemenu {
        .item, .ui.button {
            background: @HCbackground !important;
            color: @HCtextColor !important;
            border: 1px solid @HCtextColor !important;
        }
        .item:focus {
            border-color: @selected !important;

            span {
                color: @HCbackground !important;
            }
        }
    }

    /* PxtJson */
    #maineditor {
        border-left: 1px solid @HCtextColor !important;
        background: @HCbackground;

        .ui.segment {
            border: 1px solid @HCtextColor;
            background: @HCbackground;
            color: @HCtextColor;

            .ui.toggle.checkbox {
                label {
                    color: @HCtextColor !important;
                }

                .box:before, label:before {
                    border: 1px solid @HCtextColor;
                }
            }
        }
    }

    /* Serial editor */

    #serialPreview div {
        color: @HCtextColor;
    }

    #serialCharts .ui.segment {
        background-color: @HCtextColor;
    }

    #serialEditor {
        background-color: @HCbackground;
    }

    #serialHeader .ui.header {
        color: @HCbackground;
    }

    #serialConsole {
        background-color: @HCbackground;
        color: @HCtextColor;
        border-color: @HCtextColor;
    }

    #serialPreview .label {
        border: 10px solid @HCtextColor !important;
        &:hover {
            border-color: darken(@HCtextColor, 10.0) !important;
        }
    }

    .ui.button.labeled.icon.editorBack {
        background: @HCtextColor !important;
    }

    /* Hyperlinks */
    a {
        color: @HCtextColor !important;
    }

    #sidedocsbar {
        a {
            color: @HCbackground !important;

            &:focus {
                color: @selected !important;

                i, span {
                    color: @selected !important;
                }
            }
        }
    }

    /* Dropdown */
    .ui.menu .ui.dropdown .menu,
    #editortools .ui.dropdown .menu {
        border: 1px solid @HCtextColor !important;
    }

    .ui.menu .ui.dropdown .menu,
    .ui.menu .ui.dropdown .menu > .item,
    #editortools .ui.dropdown .menu,
    #editortools .ui.dropdown .menu > .item {
        background: @HCbackground !important;
        color: @HCtextColor !important;

        &:focus {
            color: @HCtextColor !important;
            font-weight: normal !important;

            i, span {
                color: @HCtextColor !important;
                font-weight: normal !important;
            }
        }
    }

    .ui.menu .ui.dropdown .menu > .divider,
    #editortools .ui.dropdown .menu > .divider {
        background: @HCbackground !important;
        border-top: 1px solid @HCtextColor !important;
    }

    /* Tab list in Modals*/
    .ui.secondary.menu > .item,
    .ui.secondary.pointing.menu > .item,
    .ui.secondary.inverted.menu .link.item {
        color: @HCtextColor !important;
        border: 1px solid @HCtextColor !important;
    }

    .ui.secondary.menu > .item.active, .ui.secondary.menu > .item.active:hover,
    .ui.secondary.pointing.menu > .item.active, .ui.secondary.pointing.menu > .item.active:hover {
        border: 2px solid @selected !important;
        border-radius: initial !important;
        box-shadow: initial !important;
    }

    /* Tutorial */
    .ui.message {
        background-color: @HCbackground !important;
        color: @HCtextColor !important;

        .tutorialmessage {
            outline: 1px solid @HCtextColor !important;
            border: none !important;

            &:focus {
                color: @selected !important;
            }
        }
    }

    .ui.label {
        background-color: @HCbackground !important;
        border: 2px solid @HCtextColor !important;
    }

    .ui.blue.labels .label, .ui.blue.label {
        border-color: @selected !important;
    }


    /* Modals */
    .ui.modal {
        border: 2px solid @HCbackground !important;
        border-radius: initial !important;
        box-shadow: initial !important;

        > .closeIcon .close {
            color: @HCtextColor !important;
        }
    }

    .ui.modal, .ui.modal > .header, .ui.modal > .content, .ui.modal > .actions, .ui.modal > .segment {
        background: @HCbackground !important;
        color: @HCtextColor !important;
    }

    /* Accessible menu */
    .ui.menu.accessibleMenu, #accessibleMenu {
        .ui.item.link {
            color: @HCaccessibleMenuColor !important;
            background: @HCaccessibleMenuBackground !important;
        }
    }

    [data-tooltip]:after,
    [data-tooltip]:before {
        color: @HCtextColor!important;
        background-color: @HCbackground!important;
    }

    [data-tooltip]:after {
        border: 1px solid @HCtextColor!important;
    }

    [data-tooltip]:before {
        box-shadow: 1px 1px 0 0 @HCtextColor!important;
    }
}

/* > Small Monitor */
@media only screen and (min-width: @computerBreakpoint) {
    /* Hide the editor toolbor in tutorial mode */
    .hc.tutorial #editortools  {
        background: transparent !important;
        border-top: 0px;
    }
}